<template>
	<view class="page">
		<!-- 后面加一个表单进行传值 -->
		<uni-forms ref="formData" :model="formData" :rules="rules" labelPosition="top" labelWidth="100vw">
			<uni-forms-item label="01 姓名" name="name" required>
				<uni-easyinput v-model="formData.name" placeholder="请输入你的姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="02 手机号" name="tel" required>
				<uni-easyinput v-model="formData.tel" placeholder="请输入你的手机号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="03 身份证号码" name="idNumber" required>
				<uni-easyinput v-model="formData.idNumber" placeholder="请输入你的证件号码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="04 居住地址" name="address" required>
				<uni-easyinput v-model="formData.address" placeholder="请输入居住地址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="05 楼栋门牌号(详细住址)" name="location" required>
				<uni-easyinput v-model="formData.location" placeholder="请输入详细住址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="06 今日体温" name="temperature" required>
				<uni-easyinput v-model="formData.temperature" placeholder="请输入今日体温"></uni-easyinput>
			</uni-forms-item>
			<uni-data-checkbox multiple :model="formData.agree" :localdata="range" @change="change"></uni-data-checkbox>
		</uni-forms>
		<button class="button" type="primary" @click="submit()">提交</button>
	</view>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		data() { 
			let userInfo = uni.getStorageSync('userInfo')
			return {
				range: [{"value": 0,"text": "我已阅本打卡所列事项，并保证以上内容正确属实"	}],
				formData:{
					name:userInfo.name,
					tel:userInfo.phone,
					idNumber:userInfo.idCard,
					address:userInfo.address,
					location:userInfo.location,
					temperature:'',
					agree:false
				},
				rules:{
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '电话不能为空'
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					address: {
						rules: [{
							required:true,
							errorMessage: '请输入居住地址'
						}]
					},
					location: {
						rules: [{
							required:true,
							errorMessage: '请输入详细住址'
						}]
					},
					temperature:{
						rules:[{
							required:true,
							errorMessage:"请输入您的体温"
						}]
					}
				},
			}
		},
		
		methods: {
			submit(){
				console.log(this.formData.agree)
				if(!this.formData.agree){
					uni.showModal({
						title: '提示',
						content: '条款未勾选，请检查表单后勾选',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.$refs.formData.validate().then((res)=>{
					request('/health/record',{
						name:this.formData.name,
						phone:this.formData.tel,
						idCard:this.formData.idNumber,
						address:this.formData.address,
						location:this.formData.location,
						temperature:this.formData.temperature,
					},"POST").then(resp=>{
							if(resp.code!==200){
								uni.showToast({
									icon:'error',
									title:"打卡失败",
									duration:2000
								})
							}
							console.log(resp);
							uni.showToast({
								icon:'success',
								title: '打卡成功',
								duration:2000
							})
					}).catch(err=> {
						console.log(err);
					})
				}).catch((err)=>{
					console.log(err);
				})
			},
			change(e){
				this.formData.agree = !this.formData.agree;
			}
		}
	}
</script>

<style scoped>
	.page{
		margin:10px 20px;
	}
	.button{
		width: 80%;
		margin-bottom: 20px;
		margin-top: 20px;
	}
</style>
